<template>
  <div class="student-bg">
    <div class="student-bg-mask"></div>
    <div class="student-score-container">
      <el-card class="card-block notice-block">
        <NoticeBoard :notices="['本学期成绩已公布，请及时查看！']" />
      </el-card>
      <el-card class="card-block info-block">
        <StudentInfo />
      </el-card>
      <el-card class="card-block stats-block">
        <StudentStats :scores="scores" />
      </el-card>
      <el-card class="card-block table-block">
        <div class="header-bar">
          <h2>我的成绩</h2>
          <el-button type="danger" @click="logoutDialogVisible = true" class="logout-btn">退出</el-button>
        </div>
        <el-table
          v-loading="loading"
          :data="scores"
          style="width: 100%; margin-top: 20px;"
          stripe
          highlight-current-row
        >
          <el-table-column prop="courseId" label="课程编号" width="120" sortable />
          <el-table-column prop="courseName" label="课程名称" sortable />
          <el-table-column prop="score" label="成绩" width="100" sortable />
          <el-table-column prop="credit" label="学分" width="100" />
        </el-table>
      </el-card>
      <el-dialog v-model="logoutDialogVisible" title="确认退出" width="300px">
        <span>确定要退出登录吗？</span>
        <template #footer>
          <el-button @click="logoutDialogVisible = false">取消</el-button>
          <el-button type="danger" @click="logout">退出</el-button>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import NoticeBoard from '../components/NoticeBoard.vue'
import StudentInfo from '../components/StudentInfo.vue'
import StudentStats from '../components/StudentStats.vue'
import { useUserStore } from '../store/user'
import { useRouter } from 'vue-router'
import request from '../utils/request'

const userStore = useUserStore()
const router = useRouter()
const scores = ref([])
const loading = ref(false)
const logoutDialogVisible = ref(false)

const fetchScores = async () => {
  loading.value = true
  const studentId = localStorage.getItem('studentId') || '20230001'
  try {
    const res = await request.get('/student/score', { params: { studentId } })
    if (res.data.code === 200) {
      scores.value = res.data.data
    } else {
      scores.value = []
      alert(res.data.msg || '查询失败')
    }
  } catch (e) {
    scores.value = []
    alert('网络错误，请稍后重试')
  } finally {
    loading.value = false
  }
}

const logout = () => {
  userStore.clearUserInfo()
  localStorage.clear()
  router.push('/')
}

onMounted(() => {
  fetchScores()
})
</script>

<style scoped>
.student-bg {
  min-height: 100vh;
  width: 100vw;
  position: relative;
  background: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 40px;
  overflow-x: hidden;
}
.student-bg-mask {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,0.45);
  pointer-events: none;
  z-index: 0;
}
.student-score-container {
  position: relative;
  z-index: 1;
  background: rgba(255,255,255,0.98);
  border-radius: 22px;
  box-shadow: 0 8px 32px 0 rgba(80,120,200,0.10);
  padding: 38px 32px 32px 32px;
  min-width: 340px;
  max-width: 900px;
  width: 100%;
  margin-bottom: 40px;
  margin-top: 0;
  transition: box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.card-block {
  border-radius: 14px;
  box-shadow: 0 2px 8px 0 rgba(64,158,255,0.06);
  margin-bottom: 0;
  padding: 0 0 8px 0;
}
.notice-block {
  padding-top: 10px;
  padding-bottom: 2px;
}
.info-block {
  padding-top: 10px;
  padding-bottom: 2px;
}
.stats-block {
  padding-top: 10px;
  padding-bottom: 2px;
}
.table-block {
  padding-top: 10px;
  padding-bottom: 10px;
}
.header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.logout-btn {
  margin-left: 20px;
}
@media (max-width: 600px) {
  .student-score-container {
    padding: 18px 4vw 18px 4vw;
    min-width: unset;
    max-width: 100vw;
    border-radius: 10px;
    gap: 12px;
  }
  .card-block {
    border-radius: 8px;
    padding: 0 0 4px 0;
  }
}
</style>